<template>
  <div class="board">
    <div class="top">
      <div class="top-left r">
        <div class="title">
          <div class="title-txt">当日出入库任务完成情况</div>
          <div class="lendge">
            <div class="lendge-finish">已完成</div>
            <div class="lendge-nofinish">未完成</div>
          </div>
        </div>
        <div class="box">
          <div class="top-left-chart-box">
            <div class="top-left-chart1" id="top-left-chart1"></div>
            <div class="top-left-chart2" id="top-left-chart2"></div>
          </div>
        </div>
      
      </div>
      <div class="top-center r">
        <div class="title">
          <div class="title-txt">本周超时处理时长统计</div>
        </div>
        <div class="box">
          <div class="top-center-chart-box">
            <div class="top-center-chart1" id="top-center-chart1"></div>
            <div class="top-center--box">
              <div class="title-label t1">0-30分钟</div>
              <div class="title-label t31">31-60分钟</div>
              <div class="title-label t61">61-90分钟</div>
              <div class="title-label t91">91-120分钟</div>
              <div class="title-label t120">120分钟以上</div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-right r">
        <div class="title">
          <div class="title-txt">本周单据处理时长统计</div>
        </div>
        <div class="box">
          <div class="top-right-chart-box">
            <div class="top-right-chart1" id="top-right-chart1">
              <div class="top-right-item" v-for="(item, index) in lists" :key="index">
                <div class="top-right-item-txt">{{ item.label }}</div>
                <div class="top-right-item-progress">
                  <div class="progress-bg" :style="{ 'backgroundColor': item.color, 'width': item.rate ? item.rate + '%' : '0%' }">
                  </div>
                </div>
                <div class="top-right-item-num">{{ item.value }}</div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="center-left r">
  
        <div class="box r">
          <div class="title title-xs">
          <div class="title-txt">库存周转率</div>
          <div class="title-select">
            <el-select size="mini" v-model="materialNo" clearable @change="changedeptNameList">
              <el-option v-for="(item,index) in deptNameList" :key="index" :label="item.deptNameList" :value="item.materialNo">{{ item.materialName }}</el-option>
            </el-select>
          </div>
        </div>
          <div class="center-left-chart-box">
            <div class="center-left-chart1" id="center-left-chart1"></div>
          </div>
        </div>
   
      </div>

      <div class="center-right r">
       
        <div class="box r">
          <div class="title title-xs">
          <div class="title-txt">物料消耗差异对比TOP10</div>
          <div class="title-select">
            <el-select size="mini" style="width:100px;">
              <el-option></el-option>
            </el-select>
          </div>
        </div>
          <div class="center-left-chart-box">
            <div class="center-left-chart1" id="center-right-chart1"></div>
          </div>
        </div>
        <div class="lock">
          <img src="@/assets/images/lock-on.png" alt="" class="lock-img"/>
          <span class="lock-txt">升级功能，查看更多内容</span>
          <el-button class="lock-btn">升级VIP</el-button>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left r">
        <div class="box r">
          <div class="title title-xs">
          <div class="title-txt">呆滞物料占比TOP10</div>
        </div>
          <div class="center-left-chart-box">
            <div class="center-left-chart1" id="bottom-left-chart1"></div>
          </div>
        </div>
        <div class="lock">
          <img src="@/assets/images/lock-on.png" alt="" class="lock-img"/>
          <span class="lock-txt">升级功能，查看更多内容</span>
          <el-button class="lock-btn">升级VIP</el-button>
        </div>
      </div>
      <div class="bottom-right r">
      
        <div class="box r">
          <div class="title title-xs">
          <div class="title-txt">超期物料占比TOP10</div>

        </div>
          <div class="center-left-chart-box">
            <div class="center-left-chart1" id="bottom-right-chart1"></div>
          </div>
        </div>
        <div class="lock">
          <img src="@/assets/images/lock-on.png" alt="" class="lock-img"/>
          <span class="lock-txt">升级功能，查看更多内容</span>
          <el-button class="lock-btn">升级VIP</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { badnessOption, badnessOptions, badnessAreaOption, lineOption, barOption, materilaOption, dzption, cqption } from './options'
import { getTotalDetail } from '@/api/board/index.js'
import { listData } from "@/api/system/dict/data";
export default {
  data() {
    return {
      lists: [



      ],
      deptNameList:[],
      materialNo:'',
      typeList:[]
    }
  },
  created(){
    this.getMarilaList()
  },
  mounted() {
    this.renderOutDataChart() // 当日出库任务完成情况
    // this.renderInChart() // 当日入库任务完成情况
    this.renderOvertimeDataChart() // 本周超时处理时长统计
    //this.renderDurationChart()  // 本周单据处理时长统计 
    this.getStoreList() // 库存周转率
    this.getTypeList()
    this.renderMaterial() // 物料消耗差异对比TOP10
    this.renderdzption() // 呆滞物料占比TOP10
    this.rendercqption() // 超期物料占比TOP10
  },
  methods: {
    getTypeList(){
      listData({
        dictType:'all_order_type'
      }).then(res=>{
        if(res.code == 0){
          let list = res.data.list||[]
          this.typeList = list
          this.getDocumentsList()  // 本周单据处理时长统计 
        }
      })
    },
    //出入库完成情况
    renderOutDataChart() {
      let obj = {
        methodName: "inOutTaskCompleteQuery"
      }

      getTotalDetail(obj).then(res => {
        const dataArr = res.data || []

        let la = dataArr.filter(item => item.type == 'out')
        badnessOption.graphic[1].style.text = la[0].completeCount
        badnessOption.graphic[3].style.text = la[0].unCompleteCount
        badnessOption.series[0].data[0].value = la[0].unCompleteCount
        badnessOption.series[0].data[1].value = la[0].completeCount


        let ra = dataArr.filter(item => item.type == 'in')
        badnessOptions.graphic[1].style.text = ra[0].completeCount
        badnessOptions.graphic[3].style.text = ra[0].unCompleteCount
        badnessOptions.series[0].data[0].value = ra[0].unCompleteCount
        badnessOptions.series[0].data[1].value = ra[0].completeCount

        this.renderOutChart()
        this.renderInChart()
      })
    },
    renderOutChart() {
      var chartDom = document.getElementById('top-left-chart1');
      var myChart = echarts.init(chartDom);
      myChart.setOption(badnessOption);
    },
    renderInChart() {
      var chartDom = document.getElementById('top-left-chart2');
      var myChart = echarts.init(chartDom);
      myChart.setOption(badnessOptions);
    },
    renderOvertimeDataChart(){
      let obj = {
        methodName:"timeOutDealQuery"
      }
      getTotalDetail(obj).then(res=>{
        if(res&&res.length!=0){
          let arr  = []
          
          res.data.forEach(ele => {
            arr.push({
                value:ele.count||'',
                name :ele.time + '分钟'
              })
          })
          badnessAreaOption.series[0].data = arr
          this.renderOvertimeChart()

        }
      })
    },
    renderOvertimeChart() {
      var chartDom = document.getElementById('top-center-chart1');
      var myChart = echarts.init(chartDom);
      myChart.setOption(badnessAreaOption);
    },
    getMarilaList() {
      let obj = {
        "methodName":"storehouseMaterialQuery",
      }
      getTotalDetail(obj).then(res =>{
       this.deptNameList = res.data||[]

       if(this.deptNameList.length!=0){
        this.materialNo = this.deptNameList[0].materialNo
        this.changedeptNameList()
       }
      })
    },
    changedeptNameList(){
      this.getStoreList()
    },
    renderDurationChart() {
      var chartDom = document.getElementById('top-right-chart1');
      var myChart = echarts.init(chartDom);
      myChart.setOption(barOption);
    },
      //库存周转率
  getStoreList() {
    let obj = {
      "methodName":"stockTurnsRateQuery",
      materialNo:this.materialNo
    }
    getTotalDetail(obj).then(res =>{
      let xarr = []
      let yarr = []
      res.data.forEach(item =>{
        xarr.push(item.month)
        yarr.push(item.turnsRate)
      })
      lineOption.xAxis.data  = xarr
      lineOption.series[0].data  = yarr
      this.renderStore()

    })
  },
    //本周单据处理时长
    getDocumentsList() {
    let obj = {
      "methodName":"orderDealTimeQuery",
    }
    getTotalDetail(obj).then(res =>{
      let lists = res.data||[]

      let arr = ['#84CFA7','#A3DFEF','#F2BC7D','#636FEC','#0085D5','#FF8900','#23B500']
      var temp = []
      let nums = []
      lists.forEach((el)=>{
        nums.push(el.time||0)
      })
      let max = Math.max(...nums)||1

      lists.forEach((el,index)=>{
        let i = this.typeList.findIndex((item)=>{
          return item.value == el.orderType
        })
        temp.push({
          label:i!=-1?this.typeList[i].label:el.orderType,
          value:el.time||0,
          color: index > arr.length-1?arr[0]:arr[index],
          rate: (el.time/max)*100 
        })
      })
      this.lists = temp
    })
  },
    renderStore() {
      var chartDom = document.getElementById('center-left-chart1');
      var myChart = echarts.init(chartDom);
      myChart.setOption(lineOption);
    },
    renderMaterial() {
      var chartDom = document.getElementById('center-right-chart1');
      var myChart = echarts.init(chartDom);
      myChart.setOption(materilaOption);
    },
    renderdzption() {
      var chartDom = document.getElementById('bottom-left-chart1');
      var myChart = echarts.init(chartDom);
      myChart.setOption(dzption);
    },
    rendercqption() {
      var chartDom = document.getElementById('bottom-right-chart1');
      var myChart = echarts.init(chartDom);
      myChart.setOption(cqption);
    },
  }
}
</script>
<style lang="scss" scoped>
.lock{
    background:linear-gradient( 180deg, rgba(255,255,255,0.76) 0%, rgba(232,246,255,0.71) 66%, #D5EEFF 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #0085D5;

    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    z-index: 999;

    .lock-img{
      widows: 36px;
      height: 38px;
    }
    .lock-txt{
      padding:8px 0px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      line-height: 24px;
    }
    .lock-btn{
      height: 36px;
background: #1592E6;
border-radius: 6px 6px 6px 6px;
color:#fff;
    }
  }

.title {
  height: 51px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 12px;
  padding-right: 30px;
  justify-content: space-between;

  .title-txt {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    line-height: 24px;
    padding-left: 8px;
    height: 24px;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      width: 4px;
      height: 14px;
      background-color: #2EBE87;
      left: 0;
      top: 6px;
    }

  }
}
.title-xs{
  position: absolute;
  width: 100%;
  z-index:1;
  }
.r {
  background-color: #fff;
  position: relative;
}

.board {
  padding: 6px 0px 0px;
  background-color: #efefef;
  display: grid;
  box-sizing: border-box;
  height: calc(100vh - 104px);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 8px;
}

.top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
}

.center {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
}

.bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
}

.lendge {
  display: flex;

}

.lendge-finish {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 19px;
  height: 19px;
  position: relative;
  padding-left: 4px;
  margin-right: 25px;

  &::after {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    background-color: #23B500;
    left: -16px;
    top: 2px;
  }
}

.lendge-nofinish {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  height: 19px;
  font-size: 14px;
  color: #333333;
  line-height: 19px;
  padding-left: 10px;
  position: relative;

  &::after {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    background-color: #0085D5;
    left: -9px;
    top: 2px;
  }
}

.top-left {
  display: grid;
  grid-template-rows: 51px auto;



  .top-left-chart-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
    background-color: #F3FAFF;
    padding: 0px 9px;

  }

  .top-left-chart1,.top-left-chart2{
    display: flex;
    align-items: center;
  }
}

.top-center {
  display: grid;
  grid-template-rows: 51px auto;

  .top-center-chart-box {
    background-color: #F3FAFF;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-image: url('~@/assets/images/board-bg.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 140px auto;
  }

  .top-center-chart1 {
    height: 100%;
  }
}


.top-right {
  display: grid;
  grid-template-rows: 51px auto;
}

.box {
  background: #fff;
  padding: 0px 9px 9px;

}

.top-center-chart-box {
  background: #F3FAFF;
  height: 100%;
  width: 100%;
}

.top-center-chart1,
.top-right-chart1,
.center-left-chart1 {
  height: 100%;
}

.top-right-chart-box,
.center-left-chart-box {
  height: 100%;
  width: 100%;
}


.center-left,
.center-right,
.bottom-left,
.bottom-right {
  display: grid;
//  grid-template-rows: 51px auto;
}

.title-label {
  position: relative;
  height: 19px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 13px;
  color: #333333;
  line-height: 19px;
  padding-left: 20px;

}

.t1::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background-color: #0085D5;
  left: 0px;
  top: 2px;
}

.t31::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background-color: #23B500;
  left: 0px;
  top: 2px;
}

.t61::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background-color: #F2BC7D;
  left: 0px;
  top: 2px;
}

.t91::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background-color:#F99600;
  left: 0px;
  top: 2px;
}

.t120::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background-color:#A3DFEF;
  left: 0px;
  top: 2px;
}

.top-center--box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2px;
  height: 40%;
}

.top-right-item {
  display: flex;
  align-items: center;
  padding-left: 10px;

  .top-right-item-txt {
    height: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #00051C;
    padding-right: 10px;

  }

  .top-right-item-progress {
    height: 15px;
    background: #F7F8FC;
    border-radius: 0px 8px 8px 0px;
    border: 1px solid rgba(0, 0, 0, 0);
    flex: 1;
  }

  .top-right-item-num {
    width: 60px;
    padding-left: 10px;
  }

}

.progress-bg {
  height: 100%;
}

.top-right-chart1 {
  display: grid;
  grid-template-rows: auto;
}
</style>